<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose title="包裹详情" :width="600">
    <a-row>
      <a-col :span="12" v-for="(item,index) in detailList " >
        <a-button @click="handleDetail(item)" style="width: 100%;height: 50px;">包裹{{ index + 1 }}</a-button>
      </a-col>
    </a-row>
  </BasicModal>

  <LogisticDetail @register="registerDetailModal"></LogisticDetail>
</template>

<script lang="ts" setup>
import { ref, computed, unref } from 'vue';
import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
import { packageList } from '../XlCustomerLogisticPackage.api';
import { message } from 'ant-design-vue';
import LogisticDetail from '../components/LogisticDetail.vue'
// Emits声明
const emit = defineEmits(['register', 'success']);

const detailList = ref([]);

const [registerDetailModal, detailModel] = useModal();

//表单赋值
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  setModalProps({ confirmLoading: false, showCancelBtn: !!data?.showFooter, showOkBtn: !!data?.showFooter });
  if (data.record) {
    //获取明细数据
    detailList.value = await packageList({ orderCode: data.record.orderCode, logiCom: data.record.logiCom })
  }
});

/**
 * 详情
*/
function handleDetail(record) {
  detailModel.openModal(true, {
    record: record,
  });
}

</script>

<style lang="less" scoped>
/** 时间和数字输入框样式 */
:deep(.ant-input-number) {
  width: 100%;
}

:deep(.ant-calendar-picker) {
  width: 100%;
}
</style>